<template>
    <Page :isNavigation="true" :fetched="fetched">
        <div id="home">
            <div class="nav" @click="goHuajuan">
                <div class="title">你是爱美的女孩子吗？</div>
                <div class="huajuan">去看看</div>
            </div>
            <PullRefresh v-model="isLoading" @refresh="onRefresh">
                <div class="box" v-if="cardDataMap.list">
                    <div v-for="(item, index) in cardDataMap.list" :key="index">
                        <ThematicVideo v-if="+item.type === 5" :data="item" />
                        <HongRenRecom v-if="+item.type === 2" :data="item" />
                    </div>
                </div>
                <div class="recommend">
                    <p>为您推荐</p>
                    <waterfall
                        v-if="dataMap.goodsInfo"
                        :col="col"
                        :data="dataMap.goodsInfo"
                        :width="itemWidth"
                        :gutterWidth="gutterWidth"
                        @loadmore="loadmore"
                    >
                        <GoodsItem
                            v-for="(item, index) in dataMap.goodsInfo"
                            :key="index"
                            :data="item"
                        />
                    </waterfall>
                </div>
            </PullRefresh>
        </div>
    </Page>
</template>

<script>
import { PullRefresh, Toast } from "vant";
import Page from "components/Page";
import GoodsItem from "components/GoodsItem";
import ThematicVideo from "./comonents/ThematicVideo";
import HongRenRecom from "./comonents/HongRenRecom";
import axios from "axios";
import huajuanApi from "@/services/api/huajuan";
import { isMobile } from "@/utils";

export default {
    name: "home",
    data() {
        return {
            fetched: false,
            isLoading: false,
            col: 2,
            //为你推荐
            dataMap: {},
            offset: 0,
            isMore: true,
            //卡片数据
            cardDataMap: {}
        };
    },
    components: {
        PullRefresh,
        Page,
        GoodsItem,
        ThematicVideo,
        HongRenRecom
    },
    //dom挂载前
    created() {
        axios
            .all([this.fetchList(), this.fetchCard()])
            .then(() => {
                this.fetched = true;
            })
            .catch(() => {
                this.fetched = false;
            });
    },
    //dom挂载后马上执行
    computed: {
        itemWidth() {
            return (
                350 *
                0.5 *
                ((isMobile() ? document.documentElement.clientWidth : 540) /
                    375)
            );
        },
        gutterWidth() {
            return (
                10 *
                0.5 *
                ((isMobile() ? document.documentElement.clientWidth : 540) /
                    375)
            );
        }
    },
    //dom挂载后需要条件触发
    methods: {
        //上拉加载
        onRefresh() {
            const that = this;
            //请求数据
            this.fetchList(1)
                .then(function() {
                    Toast("刷新成功");
                    that.isLoading = false;
                })
                .catch(function() {
                    Toast("刷新失败");
                    that.isLoading = false;
                });
        },
        //滑动加载
        loadmore() {
            if (!this.isMore) return;
            //
            //请求列表数据
            this.fetchList();
        },
        //请求卡片数据
        fetchCard() {
            //resolve, reject
            return new Promise((resolve, reject) => {
                axios
                    .get(huajuanApi.homeCards, {
                        gc_id: 0,
                        offset: 0
                    })
                    .then(res => {
                        this.cardDataMap = res.data.data;
                        resolve(res);
                    })
                    .catch(err => {
                        reject(err);
                    });
            });
        },
        //请求推荐数据
        fetchList(refresh) {
            return new Promise((resolve, reject) => {
                axios
                    .get(huajuanApi.recGoods, {
                        params: {
                            gc_id: 0,
                            offset: refresh ? 0 : this.offset
                        }
                    })
                    .then(res => {
                        //原始数据列表
                        const original = this.dataMap.goodsInfo
                            ? this.dataMap.goodsInfo
                            : [];
                        //数据列表
                        const goodsInfo = original.concat(res.data.goodsInfo);
                        //当前数据
                        let newDataMap = refresh
                            ? res.data
                            : { ...res.data, goodsInfo };
                        //数据集
                        this.dataMap = newDataMap;
                        //是否滑动加载
                        this.isMore = res.data.goodsInfo.length > 9;
                        //数据位置
                        this.offset = goodsInfo.length;
                        //回调
                        resolve(res);
                    })
                    .catch(err => {
                        console.log(err);
                        reject(err);
                    });
            });
        },
        goHuajuan() {
            window.location.href =
                "https://m.huajuanmall.com/huajuan_h5/#/home";
        }
    }
};
</script>

<style scoped lang="stylus">
#home {
    width: 100%;
    padding-top: 100px;
}

.nav {
    width: 750px;
    height: 80px;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0px;
    left: 50%;
    z-index: 999;
    transform: translate(-50%);
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.title {
    color: #fff;
    font-size: 26px;
}

.huajuan {
    background-image: linear-gradient(90deg, #e865bf 0, #f75d94 50%, #ff597d);
    width: 150px;
    height: 56px;
    text-align: center;
    line-height: 56px;
    border-radius: 10px;
    color: #fff;
    font-size: 30px;
    letter-spacing: 2px;
}

.recommend {
    padding: 0 20px;

    >p {
        text-align: center;
        font-size: 30px;
        color: #62b587;
        padding: 20px 0;
    }
}
</style>